<template>
  <div>
    <el-container>
      <el-header>
        <div class="hea">局气模玩 | 一番赏潮玩手办</div>
        <el-button @click="goBack()" class="back">退出登录</el-button>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            :router="true"
            unique-opened
            :default-active="$route.path"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-submenu :index="item.id" v-for="(item, i) in menu" :key="i">
              <template slot="title">
                <i class="el-icon-s-fold"></i>
                <span>{{ item.name }}</span>
              </template>
              <template slot="title"></template>
              <el-menu-item
                v-for="(items, index) in item.children"
                :key="index"
                :index="items.path"
                >{{ items.text }}
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <el-card>
            <router-view></router-view>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import info from "../api/jurisdiction";
export default {
  data() {
    return {
      menu: [
        {
          name: "用户管理",
          id: "1",
          children: [
            { text: "用户列表", path: "/layout/yonghuguanli/yonghuliebiao" },
          ],
        },
        {
          name: "排行榜",
          id: "2",
          children: [
            {
              text: "充值排行榜",
              path: "/layout/paihangbang/chongzhi",
            },
            {
              text: "消费排行榜",
              path: "/layout/paihangbang/xiaofei",
            },
            {
              text: "亏损排行榜",
              path: "/layout/paihangbang/kuisun",
            },
          ],
        },
        {
          name: "财务明细",
          id: "3",
          children: [
            {
              text: "日账单",
              path: "/layout/caiwumingxi/rizhangdan",
            },
            {
              text: "月账单",
              path: "/layout/caiwumingxi/yuezhangdan",
            },
            {
              text: "余额充值记录",
              path: "/layout/caiwumingxi/yuechongzhijilu",
            },
            {
              text: "魂晶提现记录",
              path: "/layout/caiwumingxi/hunjingtixianjilu",
            },
          ],
        },
        {
          name: "抽赏管理",
          id: "5",
          children: [
            {
              text: "赏品等级设置",
              path: "/layout/choushangguanli/shangpindengjishezhi",
            },
            { text: "一番赏列表", path: "/layout/choushangguanli/yifanshang" },
            { text: "全局赏列表", path: "/layout/choushangguanli/quanjushang" },
            { text: "无限赏列表", path: "/layout/choushangguanli/wuxianchi" },
            { text: "抽赏记录", path: "/layout/choushangguanli/choushangjilu" },
            { text: "提炼记录", path: "/layout/choushangguanli/tilianjilu" },
          ],
        },
        {
          name: "订单管理",
          id: "6",
          children: [
            {
              text: "预付订单列表",
              path: "/layout/dingdanguanli/yufudingdanliebiao",
            },
            {
              text: "发货订单列表",
              path: "/layout/dingdanguanli/fahuodingdanliebiao",
            },
          ],
        },
        {
          name: "图片管理",
          id: "7",
          children: [
            {
              text: "轮播图片",
              path: "/layout/tupianguanli/lunbotupian"
            },
          ],
        },
        {
          name: "配置规则",
          id: "8",
          children: [
            {
              text: "商城购买协议",
              path: "/layout/peizhiguize/shangchenggoumaixieyi",
            },
            {
              text: "抽赏玩法说明",
              path: "/layout/peizhiguize/choushangwanfa",
            },
            {
              text: "抽赏预售规则",
              path: "/layout/peizhiguize/choushangyushouguize",
            },
            {
              text: "无限赏玩法说明",
              path: "/layout/peizhiguize/wuxianshangwanfa",
            },
            {
              text: "保底赏玩法说明",
              path: "/layout/peizhiguize/baodishangwanfa",
            },
            {
              text: "开盒用户购买协议",
              path: "/layout/peizhiguize/kaihexieyi",
            },
            {
              text: "开盒用户购买说明",
              path: "/layout/peizhiguize/kaiheshuoming",
            },
            { text: "邀请好友规则", path: "/layout/peizhiguize/yaoqinghaoyou" },
            { text: "代理分佣规则", path: "/layout/peizhiguize/dailifenyong" },
            { text: "会员等级规则", path: "/layout/peizhiguize/huiyuandengji" },
            { text: "余额充值规则", path: "/layout/peizhiguize/yuechongzhi" },
            { text: "赏袋发货须知", path: "/layout/peizhiguize/shangdaifahuo" },
            { text: "钓鱼玩法说明", path: "/layout/peizhiguize/diaoyuwanfa" },
            {
              text: "活动中心规则",
              path: "/layout/peizhiguize/huodongzhongxin",
            },
            {
              text: "翻翻乐购买说明",
              path: "/layout/peizhiguize/fanfanlegoumai",
            },
          ],
        },
        {
          name: "设置管理",
          id: "9",
          children: [
            { text: "网站设置", path: "/layout/shezhiguanli/wangzhanshezhi" },
            { text: "微信配置", path: "/layout/shezhiguanli/weixinpeizhi" },
            { text: "系统公告", path: "/layout/shezhiguanli/xitonggonggao" },
          ],
        },
        {
          name: "管理员管理",
          id: "10",
          children: [
            { text: "管理员列表", path: "/layout/guanliyuanguanli/guanliyuan" },
            { text: "角色列表", path: "/layout/guanliyuanguanli/juese" },
          ],
        },
      ],
    };
  },
  methods: {
    // 用户信息
    getAdminInfo() {},
    goBack() {
      info.logout().then((res) => {
        this.$router.push("/login");
        this.$message.success("已退出登录");
      });
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSaveMenuPath() {
      console.log(123);
    },
  },
};
</script>

<style lang="less" scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  height: calc(100vh - 60px);
}
.el-aside::-webkit-scrollbar {
  display: none;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  height: calc(100vh - 60px);
}
.hea {
  float: left;
  height: 60px;
  width: 200px;
  line-height: 60px;
  color: #325f7f;
}
.back {
  float: right;
  margin-top: 10px;
  margin-right: 20px;
}
.el-menu {
  height: 100%;
}
.el-menu-item {
  text-align: left;
}
.el-submenu {
  text-align: left;
}
</style>
